<template>
    <div>
      <el-button @click="exportExl">导出</el-button>
        <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="客户姓名" align="center">
      <template slot-scope="{row}">{{ row.name }}</template>
    </el-table-column>
    <el-table-column
      label="电话" align="center">
      <!--  
        scope.row   row是scope的属性
        {row} = scope  -->
    <template slot-scope="{row}" >{{ row.phone
 }}</template>
    </el-table-column>
    <el-table-column
      label="性别" align="center">
    <template slot-scope="{row}">{{ row.sex=="0"?"男":(row.sex=="1"?"女":"保密")
 }}</template>
    </el-table-column>
    
    <el-table-column
      prop="inputUserName"
      label="录入人" align="center">
    </el-table-column>

    <el-table-column
      label="录入时间" align="center">
    <template slot-scope="{row}">{{  row.entryTime | FormatDate }}</template>
    </el-table-column>
    <el-table-column
      label="操作" align="center">
    <template slot-scope="{row}">
        <i class="el-icon-edit"></i>修改
    </template>
    </el-table-column>
  </el-table>

   <div style="display:flex;justify-content:flex-end;padding: 20px 20px 0 0">
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
   </div>
    </div>
</template>

<script>
import { saveAs } from "file-saver"
import {GetCustomerListApi, CustomerExportApi} from "@/request/api"
export default {
    data () {
        return {
        tableData: [],
        multipleSelection: [],
        pageNum: 1,  // 当前页数
        pageSize: 10,  // 每页条数
        total:null
        }
    },
    created(){
        this.getTableData();
    },
    methods:{
        async exportExl(){
        const res = await CustomerExportApi({
          pageNum:1,
          paseSize:10
        },{
          headers:{
            'Content-Type':"application/x-www-form-urlencoded"
          },
          responseType:'blob'
        });
        if(!res)return;
        console.log(res);
        // 处理成表格文件之后调用一个保存数据的方法，浏览器会自动下载
          saveAs(
                    //Blob 对象表示一个不可变、原始数据的类文件对象。
                    //Blob 表示的不一定是JavaScript原生格式的数据。
                    //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                    //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                    new Blob([res]),
                    //设置导出文件名称
                    `客户档案_${new Date().getTime()}.xlsx`
                );
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getTableData()
        },
        handleCurrentChange(val) {
            // 当前页数改变的时候执行
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getTableData()
        },
        async getTableData(){
            const GetCustomerListApiRes = await GetCustomerListApi({
                pageNum:this.pageNum,
                pageSize:this.pageSize,
            });
            if(!GetCustomerListApiRes)return;
            console.log("---", GetCustomerListApiRes);
            
            this.tableData = GetCustomerListApiRes.rows;
            this.total = GetCustomerListApiRes.total;
        },
        handleSelectionChange(){
           
        }
    }
}
</script>
 
<style lang = "less" scoped>
    
</style>